---
import { PROJECTS } from "../consts"

const finalProjects = PROJECTS.filter((project) => !project.hidden)
  .slice()
  .reverse()
---

<div
  class="grid gap-8 mb-6 lg:mb-16 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto"
>
  <article
    class="min-h-60 relative items-center text-black rounded-lg bg-purple-50"
  >
    <a
      href="https://twitch.tv/midudev"
      target="_blank"
      rel="noopener noreferrer"
      class="group hover:scale-110 transition flex justify-center flex-col h-full items-center font-semibold text-purple-700 text-center text-xl"
    >
      <svg
        class="w-16 h-16 mb-2"
        xmlns="http://www.w3.org/2000/svg"
        width="118"
        height="138"
        viewBox="0 0 118 138"
        ><g fill="none" fill-rule="evenodd"
          ><path
            fill="#FFF"
            d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
          ></path><path
            fill="#9146FF"
            d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
          ></path></g
        ></svg
      >
      Próximamente en Twitch<br />
      siguiente proyecto...
    </a>
  </article>
  {
    finalProjects.map((project, reversedIndex) => {
      const index = finalProjects.length - reversedIndex - 1
      const num = `${index + 1}`.padStart(2, "0")

      return (
        <article class="relative items-center text-black rounded-lg">
          <a
            href={`/${project.slug}`}
            class="group hover:scale-110 block transition"
          >
            <span class="group-hover:scale-[2] transition-all group-hover:top-4 group-hover:left-6 opacity-70 group-hover:opacity-100 absolute top-2 left-2 -rotate-12 text-2xl font-bold">
              #{num}
            </span>
            <img
              class="w-full rounded-lg overflow-hidden object-cover aspect-video"
              src={`./projects/${num}.webp`}
              alt={`Captura de pantalla del proyecto ${project.title}`}
            />
          </a>
          <div class="p-5">
            <h2 class="text-4xl font-bold tracking-tight text-gray-900">
              <a
                href={`/${project.slug}`}
                class="hover:text-yellow-500 transition"
              >
                {project.title}
              </a>
            </h2>
            <p class="mt-3 mb-4 font-light text-gray-800">
              {project.description}
            </p>
            <ul class="inline-flex flex-wrap gap-2">
              {project.learnings.map((learning) => (
                <li class="text-xs font-light text-gray-600 bg-gray-100 px-2 py-1 rounded-full">
                  {learning}
                </li>
              ))}
            </ul>
            <ul class="flex flex-wrap gap-2 mt-4">
              <li>
                <a
                  href={`https://github.com/midudev/javascript-100-proyectos/tree/main/${project.slug}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-black bg-white transition border border-black/60 rounded-lg hover:bg-black/10 md:text-sm"
                >
                  <svg
                    class="w-5 h-5 mr-1"
                    fill="currentColor"
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  Código
                </a>
              </li>
              <li>
                <a
                  href={`/${project.slug}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-sky-600 bg-white transition border border-sky-600/60 rounded-lg hover:bg-sky-500/20 md:text-sm"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-5 h-5 mr-1"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
                    />
                  </svg>
                  Demo
                </a>
              </li>
              {project.youtube != null && (
                <li>
                  <a
                    href={project.youtube}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-red-700 bg-white transition border border-red-700/60 rounded-lg hover:bg-red-600/20 md:text-sm"
                  >
                    <svg
                      class="w-5 h-5 mr-1"
                      viewBox="0 0 256 180"
                      width="256"
                      height="180"
                      xmlns="http://www.w3.org/2000/svg"
                      preserveAspectRatio="xMidYMid"
                    >
                      <path
                        d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
                        fill="red"
                      />
                      <path
                        fill="#FFF"
                        d="m102.421 128.06 66.328-38.418-66.328-38.418z"
                      />
                    </svg>
                    Vídeo
                  </a>
                </li>
              )}
            </ul>
          </div>
        </article>
      )
    })
  }
</div>
